<!--
 * @Description:分类列表
 * @Author: zhangweigang
 * @Date: 2021-03-20 21:47:07
 * @LastEditTime: 2021-05-05 10:29:29
 * @LastEditors: zhangweigang
-->
<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }"><span class="tW">首页</span> </el-breadcrumb-item>
      <el-breadcrumb-item><span class="tW">书籍分类管理</span></el-breadcrumb-item>
      <el-breadcrumb-item><span class="tW">分类列表</span></el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <!-- 分类列表区域 -->
      <el-row :gutter="20">
        <!--  :span 指定宽度 -->
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表区域 -->
      <el-table class="table" :data="getCateList" stripe border>
        <el-table-column prop="name" label="分类姓名" header-align="center"></el-table-column>
        <el-table-column prop="creator" label="创建人" header-align="center"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" header-align="center"></el-table-column>
        <el-table-column label="操作" header-align="center">
          <template slot-scope="scope">
            <!-- 修改按钮  -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
            <!-- 删除按钮  -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteCate(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加分类 -->
    <el-dialog title="添加分类" :visible.sync="addDialogVisible" @close="addDialogClosed" width="50%">
      <!-- 内容主体区域 -->
      <el-form :model="addCateForm" :rules="addCateRules" ref="addCateRef" label-width="100px">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="addCateForm.name" clearable></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改分类 -->
    <el-dialog title="修改分类" :visible.sync="modifyDialogVisible" @close="modifyDialogClosed" width="50%">
      <!-- 内容主体区域 -->
      <el-form :model="modifyCateForm" :rules="modifyCateRules" ref="modifyCateRef" label-width="100px">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="modifyCateForm.name" clearable></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import bookShareManagerInfoAipService from '@/network/aipBookShareService.js'
export default {
  data() {
    return {
      getCateList: [],
      addDialogVisible: false,
      modifyDialogVisible: false,
      addCateForm: {
        name: ''
      },
      addCateRules: {
        name: [
          {
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
          }
        ]
      },
      modifyCateForm: {
        name: '',
        id: ''
      },
      modifyCateRules: {
        name: [
          {
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    // 获取分类类表
    this.getCateListInfo()
  },
  methods: {
    // 获取分类类表
    getCateListInfo() {
      bookShareManagerInfoAipService.getBookCateInfo().then(res => {
        if (res.data.code === 0) {
          this.getCateList = res.data.data
        } else {
          this.$message({
            showClose: true,
            message: '分类获取失败，请联系管理员！',
            type: 'error',
            duration: 4000
          })
        }
      })
    },
    // 添加分类
    addCate() {
      this.$refs.addCateRef.validate(valid => {
        if (!valid) return
        let params = {
          name: this.addCateForm.name,
          delFlag: 1,
          updateDate: '',
          updater: '',
          creator: localStorage.getItem('adminname')
        }
        bookShareManagerInfoAipService.addCateData(params).then(res => {
          if (res.data.code === 0) {
            this.getCateListInfo()
            this.addDialogVisible = false
            this.$message({
              showClose: true,
              message: '恭喜您，添加成功！',
              type: 'success',
              duration: 4000
            })
          } else {
            this.$message({
              showClose: true,
              message: '添加失败，请联系管理员！',
              type: 'error',
              duration: 4000
            })
          }
        })
      })
    },
    // 获取分类名称
    showEditDialog(scope) {
      this.modifyDialogVisible = true
      this.modifyCateForm.name = scope.name
      this.modifyCateForm.id = scope.id
      console.log(info)
    },
    // 修改分类
    modifyCate() {
      this.$refs.modifyCateRef.validate(valid => {
        if (!valid) return
        let params = {
          id: this.modifyCateForm.id,
          name: this.modifyCateForm.name,
          delFlag: 1,
          updateDate: '',
          updater: '',
          creator: localStorage.getItem('adminname')
        }
        bookShareManagerInfoAipService.modifyCateInfo(params).then(res => {
          if (res.data.code === 0) {
            this.getCateListInfo()
            this.modifyDialogVisible = false
            this.$message({
              showClose: true,
              message: '修改成功！',
              type: 'success',
              duration: 4000
            })
          } else {
            this.$message({
              showClose: true,
              message: '修改失败，请联系管理员！',
              type: 'error',
              duration: 4000
            })
          }
        })
      })
    },
    // 删除分类
    async deleteCate(id) {
      console.log(id)
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果点击确定 返回为 confirm，点击取消 返回为 cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除操作！')
      }
      bookShareManagerInfoAipService.deleteByIdCate(id).then(res => {
        if (res.data.code === 0) {
          this.getCateListInfo()
          this.$message({
            showClose: true,
            message: '删除成功！',
            type: 'error',
            duration: 4000
          })
        } else {
          this.$message({
            showClose: true,
            message: '删除失败，请联系管理员！',
            type: 'error',
            duration: 4000
          })
        }
      })
    },
    // 对话框关闭事件
    addDialogClosed() {
      this.$refs.addCateRef.resetFields()
    },
    // 对话框关闭事件
    modifyDialogClosed() {
      this.$refs.modifyCateRef.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.table {
  margin-top: 10px;
}
</style>
